<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人力资源管理系统 - 个人资料</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#64748b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 引入公共CSS -->
  <link rel="stylesheet" href="css/common.css">

  <!-- 引入API和公共JS -->
  <script src="js/api.js"></script>
  <script src="js/common.js"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <div id="app" class="flex h-screen overflow-hidden"></div>

  <script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      if (checkAuthentication()) {
        initPage();
      }
    });

    // 初始化页面
    function initPage() {
      // 加载侧边栏和用户信息
      initSidebar();
      initUserInfo();
      initLogout();

      // 加载个人资料
      loadUserProfile();
      // 添加这行代码以初始化头像上传和保存按钮事件
      initProfileActions();
    }

    // 加载用户资料
    function loadUserProfile() {
        showLoading(); // 显示加载状态
        api.getProfile()
            .then(profileData => {
                hideLoading(); // 隐藏加载状态
                renderUserProfile(profileData);
            })
            .catch(error => {
                hideLoading(); // 出错也隐藏加载状态
                console.error('加载个人资料失败:', error);
                showToast('加载个人资料失败，请重试', 'error');
            });
    }

    // 渲染用户资料
    function renderUserProfile(userData) {
        // 更新个人信息区域
        const userNameElement = document.getElementById('userName');
        const userEmailElement = document.getElementById('userEmail');
        const userPhoneElement = document.getElementById('userPhone');
        const userDepartmentElement = document.getElementById('userDepartment');
        const userPositionElement = document.getElementById('userPosition');
        const userAvatarElement = document.getElementById('userAvatar');

        if (userNameElement) userNameElement.textContent = userData.name || '未设置';
        if (userEmailElement) userEmailElement.textContent = userData.email || '未设置';
        if (userPhoneElement) userPhoneElement.textContent = userData.phone || '未设置';
        if (userDepartmentElement) userDepartmentElement.textContent = userData.department || '未设置';
        if (userPositionElement) userPositionElement.textContent = userData.position || '未设置';
        if (userAvatarElement) {
            userAvatarElement.src = userData.avatar || 'https://picsum.photos/200/200?random=1';
            userAvatarElement.alt = userData.name || '用户头像';
        }

        // 更新技能信息
        const skillsContainer = document.getElementById('skillsContainer');
        if (skillsContainer && Array.isArray(userData.skills)) {
            skillsContainer.innerHTML = '';
            userData.skills.forEach(skill => {
                const skillBadge = document.createElement('span');
                skillBadge.className = 'bg-primary/10 text-primary px-3 py-1 rounded-full text-sm m-1';
                skillBadge.textContent = `${skill.name} (${skill.level})`;
                skillsContainer.appendChild(skillBadge);
            });
        }

        // 更新工作经历
        const experienceContainer = document.getElementById('experienceContainer');
        if (experienceContainer && Array.isArray(userData.experiences)) {
            experienceContainer.innerHTML = '';
            userData.experiences.forEach(exp => {
                const expCard = document.createElement('div');
                expCard.className = 'bg-white p-4 rounded-lg shadow mb-3';
                expCard.innerHTML = `
                    <h4 class="font-bold">${exp.company}</h4>
                    <p class="text-sm text-gray-500">${exp.position} | ${exp.startDate} - ${exp.endDate || '至今'}</p>
                    <p class="mt-2">${exp.description}</p>
                `;
                experienceContainer.appendChild(expCard);
            });
        }
    }

    // 初始化头像上传和保存按钮事件
    function initProfileActions() {
        // 初始化头像上传功能
        const avatarUpload = document.getElementById('avatarUpload');
        if (avatarUpload) {
            avatarUpload.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    showLoading();
                    api.updateAvatar(file)
                        .then(response => {
                            hideLoading();
                            showToast('头像更新成功');
                            // 重新加载个人资料
                            loadUserProfile();
                        })
                        .catch(error => {
                            hideLoading();
                            console.error('更新头像失败:', error);
                            showToast('更新头像失败，请重试', 'error');
                        });
                }
            });
        }

        // 初始化保存按钮事件
        const saveProfileBtn = document.getElementById('saveProfileBtn');
        if (saveProfileBtn) {
            saveProfileBtn.addEventListener('click', function() {
                // 获取表单数据
                const profileData = {
                    name: document.getElementById('editName').value,
                    email: document.getElementById('editEmail').value,
                    phone: document.getElementById('editPhone').value,
                    // 其他需要更新的字段
                };

                showLoading();
                api.updateProfile(profileData)
                    .then(response => {
                        hideLoading();
                        showToast('个人资料更新成功');
                        // 重新加载个人资料
                        loadUserProfile();
                        // 关闭模态框
                        const modal = document.getElementById('editProfileModal');
                        if (modal) modal.style.display = 'none';
                    })
                    .catch(error => {
                        hideLoading();
                        console.error('更新个人资料失败:', error);
                        showToast('更新个人资料失败，请重试', 'error');
                    });
            });
        }
    }
  </script>
</body>
</html>